<template>
	<view>
		<!-- Toast消息提示 -->
		<u-toast ref="uToast" />
		<!-- 封装的组件 -->
		<view class="uni-list-cell" @click="handleNavTo(msgProp.url)">
			<view class="uni-media-list">
				<!-- 左侧的图标 -->
				<view class="home-icon" :class="msgProp.iconColor">
					<i class="iconfont" :class="msgProp.icon">
						<u-badge type="error" :count="msgProp.count"></u-badge>
					</i>
				</view>
				<!-- 右侧的数据 -->
				<uni-view class="uni-media-list-body">
					<uni-view class="uni-media-list-text-top">
						<span>{{msgProp.title}}</span>
						<span style="font-size: 26rpx;color: #999999;">{{msgProp.time}}</span>
					</uni-view>
					<uni-view class="uni-media-list-text-bottom">
						<uni-text><span>{{msgProp.description}}</span></uni-text>
					</uni-view>
				</uni-view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "Msg",
		props: ["msgProp"],
		methods: {
			/* 点击组件回调 */
			handleNavTo(url) {
				// 提示
				this.$refs.uToast.show({
					title: '模块开发中...',
					position: 'top',
					duration: 1000
				})
				// 跳转页面
				// navTo(url);
			},
		}
	}
</script>

<style>
	@import '@/common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-media-list {
		padding: 15px 15px;

	}

	.uni-media-list-body {
		height: 42px;
		padding-left: 20rpx;
	}

	.uni-media-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 24rpx;
		font-size: 26rpx;
		color: #666666;
	}

	span {
		margin-right: 10rpx;
	}
</style>
